<!DOCTYPE html>
<html>
<head>
	<% include ../link %>
</head>
<body>
	<% include ../head %>
	<% include ../subtitle %>
	<div class="container">
		<div class="row" style="margin-bottom: 20px;">
		</div>
	</div>
	<div class="container">
		<h3>&nbsp;&nbsp;动画<small>...</small></h3>
		<div class="row" data-bind="foreach: animation">
			<div class="col-sm-6 col-md-3">
				<a class="views" target="_blank" data-bind="attr: { href: id}">
					<img class="index-bg-img" style="width:100%;" data-bind="attr: { src : img}">
					<div class="caption">
						<p title="" data-bind="text: name, attr: { title : info}"></p>
					</div>
				</a>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="row" style="margin-bottom: 20px;">
		</div>
	</div>
	<div class="container">
		<h3>&nbsp;&nbsp;科技<small>...</small></h3>
		<div class="row" data-bind="foreach: technology">
			<div class="col-sm-6 col-md-3">
				<a class="views" target="_blank" data-bind="attr: { href: id}">
					<img class="index-bg-img" style="width:100%;" data-bind="attr: { src : img}">
					<div class="caption">
						<p title="" data-bind="text: name, attr: { title : info}"></p>
					</div>
				</a>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="row" style="margin-bottom: 20px;">
		</div>
	</div>
	<div class="container">
		<h3>&nbsp;&nbsp;音乐<small>...</small></h3>
		<div class="row" data-bind="foreach: music">
			<div class="col-sm-6 col-md-3">
				<a class="views" target="_blank" data-bind="attr: { href: id}">
					<img class="index-bg-img" style="width:100%;" data-bind="attr: { src : img}">
					<div class="caption">
						<p title="" data-bind="text: name, attr: { title : info}"></p>
					</div>
				</a>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="row" style="margin-bottom: 20px;">
		</div>
	</div>
	<div class="container">
		<h3>&nbsp;&nbsp;美食<small>...</small></h3>
		<div class="row" data-bind="foreach: food">
			<div class="col-sm-6 col-md-3">
				<a class="views" target="_blank" data-bind="attr: { href: id}">
					<img class="index-bg-img" style="width:100%;" data-bind="attr: { src : img}">
					<div class="caption">
						<p title="" data-bind="text: name, attr: { title : info}"></p>
					</div>
				</a>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="row" style="margin-bottom: 20px;">
		</div>
	</div>
	<div class="container">
		<h3>&nbsp;&nbsp;游戏<small>...</small></h3>
		<div class="row" data-bind="foreach: game">
			<div class="col-sm-6 col-md-3">
				<a class="views" target="_blank" data-bind="attr: { href: id}">
					<img class="index-bg-img" style="width:100%;" data-bind="attr: { src : img}">
					<div class="caption">
						<p title="" data-bind="text: name, attr: { title : info}"></p>
					</div>
				</a>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="row" style="margin-bottom: 20px;">
		</div>
	</div>
	<div class="container">
		<h3>&nbsp;&nbsp;时尚<small>...</small></h3>
		<div class="row" data-bind="foreach: fashion">
			<div class="col-sm-6 col-md-3">
				<a class="views" target="_blank" data-bind="attr: { href: id}">
					<img class="index-bg-img" style="width:100%;" data-bind="attr: { src : img}">
					<div class="caption">
						<p title="" data-bind="text: name, attr: { title : info}"></p>
					</div>
				</a>
			</div>
		</div>
	</div>

	<div class="container">
		<div class="row" style="margin-bottom: 20px;">
		</div>
	</div>
	<div class="container">
		<h3>&nbsp;&nbsp;TV剧<small>...</small></h3>
		<div class="row" data-bind="foreach: tv">
			<div class="col-sm-6 col-md-3">
				<a class="views" target="_blank" data-bind="attr: { href: id}">
					<img class="index-bg-img" style="width:100%;" data-bind="attr: { src : img}">
					<div class="caption">
						<p title="" data-bind="text: name, attr: { title : info}"></p>
					</div>
				</a>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="row" style="margin-bottom: 20px;">
		</div>
	</div>
	<% include ../foot %>
</body>
<script>
	var video = '<%- JSON.stringify(video)%>'
	video = JSON.parse(video)

	function ViewModel(v){
		var self = this;
		self.animation = ko.observableArray()
		self.technology = ko.observableArray()
		self.music = ko.observableArray()
		self.food = ko.observableArray()
		self.game = ko.observableArray()
		self.fashion = ko.observableArray()
		self.tv = ko.observableArray()
	}

	var vm = new ViewModel();

	for (var i = 0; i < video.length; i++) {
		switch(video[i].tag){
			case 'animation':{
				vm.animation.push(new vidoeViewModel(video[i]))
				break;
			}
			case 'technology':{
				vm.technology.push(new vidoeViewModel(video[i]))
				break;
			}
			case 'music':{
				vm.music.push(new vidoeViewModel(video[i]))
				break;
			}
			case 'food':{
				vm.food.push(new vidoeViewModel(video[i]))
				break;
			}
			case 'game':{
				vm.game.push(new vidoeViewModel(video[i]))
				break;
			}
			case 'fashion':{
				vm.fashion.push(new vidoeViewModel(video[i]))
				break;
			}
			case 'tv':{
				vm.tv.push(new vidoeViewModel(video[i]))
				break;
			}
		}
	}

	function vidoeViewModel(o){
		var self = this
		self.name = o.name
		self.img = o.img
		self.id = '/video/av/'+o._id
		self.upUser = o.upUser
		self.upTime = o.upTime
		self.info = o.info
	}	
	
	ko.applyBindings(vm);

</script>
</html>